import styles from "./dialog-message-input.module.scss"
import {Input, Button} from "antd";
import {useState} from "react";
import DialogMessagesActions from "./dialog-message-action";
import {userChatStore} from "@/app/store/chat-store";

interface Props {
    onEnter: (value: string) => void;
}

export function DialogMessageInput(props: Props) {
    const {onEnter} = props;
    const [value, setValue] = useState(String)
    const chatStore = userChatStore()
    const currentSession = chatStore.currentSession();
    const onPressEnter = (e: any) => {
        e.preventDefault();  //阻止默认的回车键行为，防止换行
        onEnter(e.target.value); // 回调传递过来的 回车事件
        setValue(''); // 请求空值
    }
    const handleKeyDown = (e: any) => {
        if (e.ctrlKey && e.key === "Enter") {
            onSend(value);
        }
    }

    const onSend = (value: any) => {
        // 输入内容
        onEnter(value);
        // 清空当前对话框
        setValue('');
    }
    return (

        <div className={styles.wrapper}>
            <DialogMessagesActions config={currentSession.config}/>
            <Input.TextArea
                value={value}
                onChange={(e) => setValue(e.target.value)}
                className={styles.textarea}
                placeholder={"请输入"}
                autoFocus
                onKeyDown={handleKeyDown}
                // 发送消息后 问答未回复之前不允许再次输入数据发送
                disabled = {currentSession.isDisabled}
                // onPressEnter = { (e) =>{onPressEnter(e)} }
            />
            <Button disabled={!value?.length} type="primary" className={styles.btn}
                    onClick={() => onSend(value)}>发送(Ctrl+Enter)</Button>

        </div>
    )
}